<template>
  <div :style="{height: this.winHeight + 'px'}" class="main">
    <h1 class="title">星原管理测试</h1>
    <div class="echart">
      <div>
        <div class="echart-box-bar" ref="bar"></div>
        <div class="echart-box-boxpie" ref="boxpie"></div>
        <div class="echart-box-boxpie" ref="boxpie1"></div>
      </div>
      <div class="main-center">
        <div class="content">
          <div class="option1" ref="option1"></div>
          <div class="option2" ref="option2"></div>
        </div>
        <div class="content-botom">div2</div>
      </div>
      <div class="echart-botom">
        <div class="echart-box-fold" ref="foldline"></div>
      </div>
    </div>
  </div>
</template>
<script>
//引入echarts
import * as echarts from 'echarts'

export default {
  name: 'chart',
  data() {
    return {
      msg: "error:chart",
      winHeight: 0,
    }
  },
  created() {
    this.getHeight()
  },
  methods: {
    getHeight() {
      this.winHeight = window.innerHeight
    }
  },
  mounted() {
    //折线图与饼图联动
    var option1 = echarts.init(this.$refs.option1);
    var option2 = echarts.init(this.$refs.option2);
   setTimeout(function (){
     option1.setOption({
       color: ['#c6e8ad', '#00DDFF', '#37A2FF', '#FFBF00', '#f3a19e'],
       legend: {},
       tooltip: {
         trigger: 'axis',
         showContent: false
       },
       dataset: {
         source: [
           ['服装', '衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
           ['第一季度', 56, 82, 101, 70, 83, 85],
           ['第二季度', 51, 51, 55, 53, 73, 68],
           ['第三季度', 12, 15, 30, 25, 0, 23],
           ['第四季度', 3, 7, 2, 6, 6, 8],
         ]
       },
       xAxis: [
         {
           type: 'category',
           boundaryGap: false,
           axisTick: {
             alignWithLabel: true
           }
         }
       ],
       yAxis: { gridIndex: 0 },
       grid: [
         {
           width: '60%',
           left: '2%',
           bottom: '3%',
           containLabel: true
         }
       ],
       series: [
         {
           type: 'line',
           smooth: true,
           seriesLayoutBy: 'row',
           emphasis: { focus: 'series' }
         },
         {
           type: 'line',
           smooth: true,
           seriesLayoutBy: 'row',
           emphasis: { focus: 'series' }
         },
         {
           type: 'line',
           smooth: true,
           seriesLayoutBy: 'row',
           emphasis: { focus: 'series' }
         },
         {
           type: 'line',
           smooth: true,
           seriesLayoutBy: 'row',
           emphasis: { focus: 'series' }
         },
         {
           type: 'line',
           smooth: true,
           seriesLayoutBy: 'row',
           emphasis: { focus: 'series' }
         },
         {
           type: 'pie',
           id: 'pie',
           center: ['84%', '65%'],
           radius: ['20%', '55%'],
           itemStyle: {
             borderRadius: 10,
             borderColor: '#fff',
             borderWidth: 2
           },
           label: {
             position: 'inside',
             formatter: '{d}%'
           },
           emphasis: {
             label: {
               show: true,
               fontSize: '10',
               fontWeight: 'bold',
               formatter: '{b}:{@衬衫}'
             }
           },
           encode: {
             itemName: '服装',
             value: '衬衫',
             tooltip: '衬衫'
           }
         }
       ]
     })
   });
    option1.on('updateAxisPointer', function (event) {
      const xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1;
        option1.setOption({
          series: {
            id: 'pie',
            label: {
              formatter: '{d}%'
            },
            encode: {
              value: dimension,
              tooltip: dimension
            }
          }
        });
      }
    });
    //柱状图
    var myChart = echarts.init(this.$refs.bar);
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      },
        //数据2  折线
        {
          name: "折线",
          type: "line", //类型 折线
          smooth: true, //是否是弯曲的折现  弯弯曲曲
          itemStyle: {
            //折线样式
            /*设置折线颜色*/
            normal: {
              color: "#c4cddc"
            }
          },
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
    //折线图
    const foldline = echarts.init(this.$refs.foldline);
    foldline.setOption({
      xAxis: {
        type: 'category',
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      lengend: {},
      //工具栏
      toolbox: {
        show: true,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false}, //数据视图
          magicType: {show: true, type: ["line", "bar"]},//折线图和柱状图
          restore: {show: true},//刷新
          saveAsImage: {show: true}//保存
        }
      },
      tooltip: {
        trigger: "axis" //显示当前列的所有信息
      },
      yAxis: {
        type: "value"
      },
      series: [
        //数据   五条折线数据  line 折线
        {
          data: [820, 932, 901, 934, 1290, 1330],
          type: "line"
        },
        {
          data: [11, 22, 33, 44, 55, 66],
          type: "line"
        },
        {
          data: [111, 222, 333, 444, 555, 666],
          type: "line"
        },
        {
          data: [711, 622, 533, 444, 355, 266],
          type: "line"
        },
        {
          data: [611, 422, 533, 644, 755, 666],
          type: "line"
        }
      ]
    })
    //饼图
    const pie = echarts.init(this.$refs.boxpie);
    pie.setOption({
      title: {
        text: '某站点用户访问来源',
        subtext: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        y: 'center',
      },
      series: [{
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [{
          value: 1048,
          name: '搜索引擎'
        },
          {
            value: 735,
            name: '直接访问'
          },
          {
            value: 580,
            name: '邮件营销'
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    });

    //饼图
    const pie1 = echarts.init(this.$refs.boxpie1);
    pie1.setOption({
      title: {
        text: '某站点用户访问来源',
        subtext: '',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        y: 'center',
      },
      series: [{
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [{
          value: 1048,
          name: '搜索引擎'
        },
          {
            value: 735,
            name: '直接访问'
          },
          {
            value: 580,
            name: '邮件营销'
          },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }
      ]
    })
    ;
  }
}
</script>
<style>
.title {
  text-align: center;
}

.main {
  background: #bfcbd9;
  margin-top: -20px;
}

.echart {
  display: flex;
  width: 100%;
  margin: 20px;
}

.echart .echart-box-bar {
  width: 400px;
  height: 250px;
  margin: 20px;
}

.echart .main-center {
  width: 500px;
  height: 250px;
  display: flex;
  flex-direction: column;
}

.echart .main-center .content {
  width: 100%;
  height: 350px;
}

.echart .echart-box-boxpie {
  width: 400px;
  height: 250px;
}

.echart .main-center .content .option1 {
  width: 450px;
  height: 250px;
}

.echart .main-center .content .option2 {
  width: 450px;
  height: 250px;
}

.echart-botom .echart-box-fold {
  width: 400px;
  height: 350px;
  margin: 20px;
}

</style>
